<template>
  <div>
    <div class="all">
      <div class="headers">
        <el-tabs v-model="activeName" style="width:100%">
            <div class="tagtable">
              <div style="background:#fff;padding:20px">
                <div style="display:flex;  justify-content: space-between;align-items: center;">
                  <div style="width:100%">
                    <el-form :inline="true" ref="form" :model="form">
                      <el-form-item>
                        <el-button type="success" @click="addstores">新建门店</el-button>
                      </el-form-item></br>
                        <!-- 查询表单 -->
                      <el-form-item style="margin-right:1rem" label="门店负责人："> 
                        <el-input v-model="form.contacts" placeholder="请输入门店负责人">
                      </el-input></el-form-item>
                       <el-form-item style="margin-right:1rem" label="门店联系电话："> 
                        <el-input v-model="form.contactPhone" placeholder="请输入门店联系电话"></el-input>
                      </el-form-item>
                       <el-form-item label="商户名称："> 
                        <el-input v-model="form.mchName" placeholder="请输入商户名称"></el-input>
                      </el-form-item>
                       <el-form-item style="margin-right:1rem" label="门店名称："> 
                        <el-input v-model="form.storeName" placeholder="请输入门店名称"></el-input>
                      </el-form-item>
                      <el-form-item label="绑定状态：" style="margin-right:2rem">
                        <el-select v-model="form.bindStatus" placeholder="请选择" clearable style="width:105px;">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                      </el-form-item>
                      <el-button type="primary" @click="searchs">查询</el-button>
                      <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
                    </el-form>
                  </div>
                </div>
                <!-- 门店列表 -->
                <el-table class="alldata" :data="tableData" stripe  style="width: 100%;margin-top:20px;overflow: auto;" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading">
                  <el-table-column type="index" label="序号" align="center"> </el-table-column>
                  <el-table-column prop="storeName" label="门店名称" align="center"> </el-table-column>
                  <el-table-column prop="id" label="门店编码" align="center"> </el-table-column>
                  <el-table-column prop="mchName" label="商户名称" align="center"> </el-table-column>
                  <el-table-column prop="mchId" label="商户编码" align="center"> </el-table-column>
                  <el-table-column prop="contactPhone" label="联系电话" align="center"> </el-table-column>
                  <el-table-column prop="contacts" label="门店负责人" align="center"> </el-table-column>
                  <el-table-column prop="equipmentCount" label="设备数" align="center"> </el-table-column>
                  <el-table-column prop="operationTime" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="bindStatus" label="绑定状态" align="center">
                    <template slot-scope="scope">
                      <el-switch class="lef" v-model="scope.row.bindStatus == 0 ? true : false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="260" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="primary" @click="BindingDevice(scope.row)">绑定设备</el-button>
                      <el-button size="mini" @click="queryDetail(scope.row)">查看</el-button>
                      <el-button size="mini" type="primary"  @click="reform(scope.row)">修改</el-button>
                      <!-- <el-button size="mini" type="danger" @click="handleDeletes(scope.row)">删除</el-button> -->
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <el-pagination class="fy" :page-sizes="[10, 50, 100, 200]" background :page-size="form.pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="pagecount" @current-change="paging"> </el-pagination>
        </el-tabs>
      </div>
    </div>

    <!-- 绑定设备的弹窗 -->
    <el-dialog title="绑定设备" :visible.sync="dialogFormVisible" width="25%" :center=true>
      <el-form :model="dialogData" :rules="rules" ref="ruleForm" class="form_item_input">
        <el-form-item label="设备名称：" class="form_item" prop="equipmentName">
          <el-input v-model="dialogData.equipmentName" placeholder="请输入设备名称" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item label="SN编号：" style=" margin-left: 8px;" prop="equipmentNo">
            <el-input v-model="dialogData.equipmentNo" placeholder="请输入SN编号" style="width:72%"></el-input>
        </el-form-item>
         <el-form-item label="是否启用：" style=" margin-left: 8px;" prop="enableStatus">
            <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#DCDFE6"></el-switch>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { shopMerchabt, equipmentMerchabt} from '@/api/merchants'
import { saveGoodsBrand, updateGoodsBrand, removeGoodsBrand, getGoodsBrandList } from '@/api/brand'
import { getstorecenter, getstoredetail, delstores, getChannelList, xgupclo, hqallbrand, hqalltags } from '@/api/storecenter'
import { getContentList } from '@/api/tag'

export default {
  data() {
    return {
      switchValue:true,//绑定是否启用
      dialogData:{
        equipmentName:'',//设备名称
        equipmentNo:'',//设备编号
        enableStatus:'',//启用状态：0启用，1禁用 
        mchType:JSON.parse(this.$store.state.user.userInfo).userType,//商户类型 默认 0 平台  1 普通商户
        mchId:null,//商户id
        storeid:'',//店铺ID
      },
      dialogFormVisible: false,//弹窗开关
      storebrandsValue:'',
      pagecount: 0,
      pageNum:1,
      pageSize:10,
      activeName: 'first',
      form: {
        mchName:null,
        mchId:this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',//商户名this.$store.getters.mchInfo.id
        storeCode:'',//店铺编号
        storeName:'',//店铺名
        saleMode:'',//销售类型 0 没有 1 分销 2 采销 3 分+采
        contacts:'',//门店负责人
        contactPhone: '',//联系电话
        bindStatus:'',//绑定状态 0 已绑定 1未绑定
       pageNum:1,
       pageSize:10
      },
      loading: false,
      cindex: 4,
      datas: [],
      // value: '',
      isshow: false,
      upcl: null,
      pt: null,
      selecttags: null,
      selectbrands: null,
      cityOptions: [],
      checkedCities: [],
      storetag: [{ value: '0',label: '否'},{value: '1',label: '是'}],
      imgurl: `${process.env.VUE_APP_FILE_URL}/`,
      // value: true,
      fullscreenLoading: false,
      tableData: [],
      brandtitle: '',
      storename: '',
      rules: {
        equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        equipmentNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
      },
      options: [{value: '0',label: '已绑定'},{value: '1',label: '未绑定'}],
      value: ''
    }
  },
  computed: {},
  created() {
    this.merchants()
  },
  methods: {
  
   BindingDevice(val) {//打开弹窗并给需要传达参数赋值
      this.dialogFormVisible = true
      // this.dialogData.bindStatus = val.isPhysicalStore
      this.dialogData.storeid = val.id
      this.dialogData.mchId = val.mchId
    },
    async dialogConfirm() {//绑定设备
    this.dialogData.enableStatus = this.switchValue? 1 : 0
      let bindingRes = await equipmentMerchabt(this.dialogData)
      if(bindingRes.code == 200){
        this.dialogFormVisible = false
        this.$message.success('绑定设备成功！');
        this.dialogData.equipmentName = null
        this.dialogData.equipmentNo = null
        this.dialogData.enableStatus = null
        this.dialogData.mchId = null
        this.dialogData.storeid = null
      }else{
        //  this.$message.error('加载失败，请重新刷新列表');
      }
      
    },
    async merchants() {//获取门店列表
      let res = await shopMerchabt({
      mchId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',
      pageNum:this.pageNum,
      pageSize:this.pageSize,
      })
      if(res.code == 200){
         this.tableData = res.data.list
         this.pageSize = res.data.pageSize
         this. pagecount = res.data.total
      }
    
    },
    // 查询按钮点击
    async searchs() {
      const res = await shopMerchabt(this.form)
       if(res.code == 200){
         this.tableData = res.data.list
         this.form.pageSize = res.data.pageSize
         this. pagecount = res.data.total
      }
    },
    reset() {
      this.form.contacts = null
      this.form.contactPhone = null
      this.form.mchName = null
      this.form.storeName = null
      this.form.bindStatus = null
      this.searchs()
    },
    //  分页接口点击
    async paging(pageNum) {
      // console.log(this.isshow)

      // console.log(pageNum)
      const data = await getstorecenter({
        pageSize: 10,
        pageNum: pageNum,
        // 商品名称
        title: this.form.name,
        // 商品编码
        goodsNo: this.form.number,
        // 商品品牌
        brandId: this.selectbrands,
        // 是否上下架
        shelvesStatus: this.upcl,
        //商品标签
        tagId: this.selecttags,
        //渠道
        cid: this.pt
      })

      this.isshow = false
      data.data.list.forEach(element => {
        element.sliceNum = 1
      })
      this.tableData = data.data.list
      this.pagecount = data.data.total
    },
    addstores() {// 新建门店
      this.$router.push({
        name: 'MerchantAddshop'
      })
    },
    reform(item) {//修改门店
      this.$router.push({
        name:'MerchantReformShop',
        params: {val:item}
      })
    },
    queryDetail(row) {//查看详情
      this.$router.push({
        name: 'MerchantQueryshop',
        params: {id:row.id}
      })
    }
  }
}
</script>

<style scoped lang="scss">
.isshows {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.all {
  height: auto;
  width: 97%;
  background-color: #fff;
  margin: 20px auto;
  margin-top: 15px;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
.tagtitle {
  padding: 0 15px;
  padding-bottom: 23px;
  padding-top: 13px;
  color: #595961;
  font-weight: bold;
  font-size: 18px;
}
.tagtable {
  background-color: #f2f2f6;
  border-radius: 6px;
  height: 70%;
  // padding: 15px;
  width: 100%;
}
.tabletitle {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  padding: 15px;
  /* box-sizing: border-box; */
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px !important;
}
.fy {
  text-align: right;
  margin-top: 40px;
  margin-bottom: 30px;
}
.headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.alldata ::v-deep .el-table__expanded-cell div {
  color: #666;
  margin-left: 60%;
}
.try {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}
.padi {
  margin-top: 15px;
}
.lef {
  margin-left: 20px;
}
.qdlb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fles {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-end;
}
::v-deep .el-form-item__label{
    padding:0 !important;
}
.form_item_input{
  margin-left: 7%;
  
}
::v-deep .el-form-item__error{
  margin-left:72px;
}
</style>
